
<template>
  <div>
    <div class="header">
      <h1>欢迎来到智能旅游</h1>
    </div>

    <div class="nav">
      <router-link to="#home">首页</router-link>
      <router-link to="#destinations">目的地</router-link>
      <router-link to="#packages">套餐</router-link>
      <router-link to="#contact">联系我们</router-link>
    </div>

    <div class="carousel">
      <!-- 这里可以放置轮播图的JavaScript代码 -->
    </div>

    <div class="recommendations">
      <div class="recommendation-item">
        <h2>智能推荐</h2>
        <p>根据你的兴趣推荐最佳旅游路线。</p>
      </div>
      <div class="recommendation-item">
        <h2>实时天气</h2>
        <p>查看目的地的实时天气情况。</p>
      </div>
      <div class="recommendation-item">
        <h2>智能导航</h2>
        <p>提供最佳路线导航，轻松到达目的地。</p>
      </div>
    </div>

    <div class="footer">
      <p>&copy; 自由民组</p>
    </div>
  </div>
</template>

<script>export default {
  name: 'SmartTravelHome'
}
</script>

<style scoped>body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px 0;
  text-align: center;
}
.nav {
  display: flex;
  justify-content: center;
  background-color: #333;
}
.nav a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
.nav a:hover {
  background-color: #ddd;
  color: black;
}
.carousel {
  width: 100%;
  height: 400px;
  background-image: url('https://via.placeholder.com/1200x400');
  background-size: cover;
  background-position: center;
}
.recommendations {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}
.recommendation-item {
  width: 30%;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>